<template>
  <div class="header">
    <div class="left">
      <i class="iconfont icon-caipiao1"></i>
      <span>彩票-管理系统</span>
    </div>
    <div class="right">
      <avatar username="Jane Doe" :size="40"></avatar>
      <el-dropdown>
        <span class="el-dropdown-link">
          用户昵称<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>用户信息</el-dropdown-item>
          <el-dropdown-item @click.native="$router.push('/login')">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator'
import Avatar from 'vue-avatar'
@Component({
  components: { Avatar }
})
export default class HeaderIndex extends Vue {
  logo = require('static/img/siteLogo.png')
}
</script>
<style lang="less">
  .header {
    height: 100%;
    .el-dropdown {
      margin-left: 15px;
      span {
        color: #ffffff;
      }
    }
    .left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 100%;
      width: 300px;
      float: left;
      i {
        font-size: 40px;

      }
      span {
        margin-left: 15px;
        color: #ffffff;
        font-size: 16px;
      }
    }
    .right {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      width: 200px;
      float: right;
    }
  }
</style>
